<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id = "app">
  <h3>注册</h3>
  <form>
    用户名:<input type="text" v-model="myForm.username"></input>
  <br>
      密码:<input type="password" v-model="myForm.password"></input>
      性别:<input type="radio" v-model="myForm.sex" value="0">男</input>
      <input type="radio" v-model="myForm.sex" value="1">nv</input>
      爱好:<input type="checkbox" v-model="myForm.hobby" value="0">看电影</input>
      <input type="checkbox" v-model="myForm.hobby" value="1">看小说</input>
      <input type="checkbox" v-model="myForm.hobby" value="2">看游戏</input>
      <input type="checkbox" v-model="myForm.hobby" value="3">看音乐</input>
      <input type="checkbox" v-model="myForm.hobby" value="4">电</input>
      <input type="button" value="提交" @click="register"></input>
  </form>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          myForm:{
            username:"",
            password:"",
            sex:0,
            hobby:[]
          }
        }
      },
      methods:{
        register(){
          console.log(this.myForm)
        }
      }
    }).mount("#app")
</script>
</body>
</html>